<template>
  <div class="home-wrap">
    <div class="home-container">
      <div class="item">
        <div class="chart chart1">
          <div class="inner" @click="$to('orderGoods')">订单商品每日统计</div>
          <div id="chart1"></div>
        </div>
        <div class="chart chart2">
          <div class="inner" @click="$to('supplierSummary')">采购配料每日统计</div>
          <div id="chart2"></div>
        </div>
      </div>

      <div class="max-min">
        <div class="s">
          <div class="max-w">
            <div class="max-min-item2 red" @click="dingdanyujing">15天内订单到期预警! {{dateWarning.order.number}}个</div>
          </div>
          <div class="max-w">
            <div class="max-min-item2 red" @click="peiliaoyujing">15天内配料预计到货预警! {{dateWarning.peiliao.number}}个</div>
          </div>
        </div>
      </div>

      <div class="max-min">
        <div class="s">
          <div class="max-w">
            <div class="max-min-item red" @click="peiliaoMin">配料库存下限预警! {{warning.peiliaoMin}}个</div>
            <div class="max-min-item blue" @click="peiliaoMax">配料库存上限预警! {{warning.peiliaoMax}}个</div>
          </div>
          <div class="max-w">
            <div class="max-min-item red" @click="fujianMin">辅件库存下限预警! {{warning.fujianMin}}个</div>
            <div class="max-min-item blue" @click="fujianMax">辅件库存上限预警! {{warning.fujianMax}}个</div>
          </div>
        </div>
      </div>

    <div class="deal-wrap">

      <el-card shadow="hover" class="deal">
        <div slot="header" class="deal-title">
          <span>业务</span>
        </div>
        <div class="s">
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./order.png)'}" @click="$to('order')"></div>
              <div>下单</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./shengchan.png)'}" @click="$to('productList')"></div>
              <div>生产</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./chuhuo.png)'}" @click="$to('produceOut')"></div>
              <div>出货</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./caigou.png)'}" @click="$to('supplierOrder')"></div>
              <div>采购</div>
            </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="deal">
        <div slot="header" class="deal-title">
          <span>库存</span>
        </div>
        <div class="s">
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./shangpinkucun.png)'}" @click="$to('produceHas')"></div>
              <div>商品库存</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./peiliaokucun.png)'}" @click="$to('accessStock')"></div>
              <div>配料库存</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./fujiankucun.png)'}" @click="$to('auxiliaryStock')"></div>
              <div>辅件库存</div>
            </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="deal">
        <div slot="header" class="deal-title">
          <span>生产要素</span>
        </div>
        <div class="s">
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./gongyingshang.png)'}" @click="$to('supplierList')"></div>
              <div>供应商管理</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./kehuguanli.png)'}" @click="$to('customerList')"></div>
              <div>客户管理</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./shangpinguanli.png)'}" @click="$to('produceList')"></div>
              <div>商品管理</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./peiliaoguanli.png)'}" @click="$to('accessList')"></div>
              <div>配料管理</div>
            </div>
            <div class="sss">
              <div class="deal-item" :style="{'backgroundImage':'url(./fujianguanli.png)'}" @click="$to('auxiliaryList')"></div>
              <div>辅件管理</div>
            </div>
        </div>
      </el-card>
  </div>

    </div>
  </div>
</template>
<script lang="ts">
let chart1!: any;
let chart2!: any;
import Vue from 'vue';
import { Prop, Component, Emit } from 'vue-property-decorator';
import AjaxResquest from '@/api/apiRequest';
@Component({})
export default class HomePage extends Vue {
  dataRes!: AjaxResquest;
  $echarts!: any;
  $http!: any;
  warning: any = {};
  dateWarning: any = {
    order: {
      number: 0
    },
    peiliao: {
      number: 0
    }
  };
  created() {
    this.dataRes = new AjaxResquest('/index/index');
    this.getData();
  }
  mounted() {
    this.initTable();
  }
  dingdanyujing() {
    if (this.dateWarning.order.number === '') {
      this.$message({
        message: '当前没有可查询预警',
        type: 'warning'
      });
      return;
    } else {
      this.$to('order', { search: this.dateWarning.order.ordersInfos });
    }
  }
  peiliaoyujing() {
    if (this.dateWarning.peiliao.number === '') {
      this.$message({
        message: '当前没有可查询预警',
        type: 'warning'
      });
      return;
    } else {
      this.$to('supplierOrder', {
        search: this.dateWarning.peiliao.peiliaoInfos
      });
    }
  }
  peiliaoMin() {
    if (this.warning.peiliaoMinArr === '') {
      this.$message({
        message: '当前没有可查询预警',
        type: 'warning'
      });
      return;
    } else {
      this.$to('accessStock', { search: this.warning.peiliaoMinArr });
    }
  }
  peiliaoMax() {
    if (this.warning.peiliaoMaxArr === '') {
      this.$message({
        message: '当前没有可查询预警',
        type: 'warning'
      });
      return;
    } else {
      this.$to('accessStock', { search: this.warning.peiliaoMaxArr });
    }
  }
  fujianMin() {
    if (this.warning.fujianMinArr === '') {
      this.$message({
        message: '当前没有可查询预警',
        type: 'warning'
      });
      return;
    } else {
      this.$to('auxiliaryStock', { search: this.warning.fujianMinArr });
    }
  }
  fujianMax() {
    if (this.warning.fujianMaxArr === '') {
      this.$message({
        message: '当前没有可查询预警',
        type: 'warning'
      });
      return;
    } else {
      this.$to('auxiliaryStock', { search: this.warning.fujianMaxArr });
    }
  }
  getData() {
    this.$http.post('/index/index').then((res: any) => {
      if (res.data.code === 1) {
        this.warning = res.data.data.warning;
        this.dateWarning = res.data.data.dateYuJing;
        let chart1X = [];
        chart1X = [
          ...res.data.data.statistics.order.map((i: any) => {
            return i.date;
          })
        ];
        let chart1Y = [];
        chart1Y = [
          ...res.data.data.statistics.order.map((i: any) => {
            return i.num;
          })
        ];
        let chart2X = [];
        chart2X = [
          ...res.data.data.statistics.caigou.map((i: any) => {
            return i.date;
          })
        ];
        let chart2Y = [];
        chart2Y = [
          ...res.data.data.statistics.caigou.map((i: any) => {
            return i.num;
          })
        ];

        chart1.setOption({
          xAxis: {
            data: chart1X
          },
          series: [
            {
              data: chart1Y
            }
          ]
        });
        chart2.setOption({
          xAxis: {
            data: chart2X
          },
          series: [
            {
              data: chart2Y
            }
          ]
        });
      }
    });
  }
  initTable() {
    chart1 = this.$echarts.init(document.getElementById('chart1'));
    chart2 = this.$echarts.init(document.getElementById('chart2'));
    chart1.setOption({
      tooltip: {
        formatter: function(params: any) {
          console.log(params);

          return `${params.name} 商品数：${params.data}个`;
        }
      },
      xAxis: {
        data: [],
        boundaryGap: false
      },
      yAxis: {
        minInterval: 1
      },
      series: [
        {
          name: '商品数',
          type: 'line',
          data: [],
          smooth: true,
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: 'rgb(252, 134, 117)'
            }
          }
        }
      ]
    });

    chart2.setOption({
      tooltip: {
        formatter: function(params: any) {
          return `${params.name} 配料采购数：${params.data}`;
        }
      },
      xAxis: {
        data: [],
        boundaryGap: false
      },
      yAxis: {
        minInterval: 1
      },
      series: [
        {
          name: '配料采购数',
          type: 'line',
          data: [],
          smooth: true,
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: 'rgb(90, 182, 223)'
            }
          }
        }
      ]
    });
  }
}
</script>
<style lang="less">
.home-wrap {
  // min-height: 100%;
  padding-top: 50px;
  padding-bottom: 40px;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  .chart {
    width: 450px;
    height: 230px;
    position: relative;
  }
  .inner {
    cursor: pointer;
    z-index: 1110;
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 0 5px;
    box-sizing: border-box;
    color: #333;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    font-weight: 900;
  }
  .chart1,
  .chart2 {
    height: 320px;
    width: 550px;
  }
  .chart1 {
    .inner {
      border-left: #ea4a4c solid 4px;
    }
  }
  .chart2 {
    .inner {
      border-left: #2879fe solid 4px;
    }
  }
  #chart1,
  #chart2,
  #chart3,
  #chart4 {
    height: 320px;
    width: 550px;
  }
  .top {
    position: absolute;
    top: 23px;
    left: 40px;
    .title {
      padding-left: 20px;
      height: 45px;
      line-height: 1.5;
      font-size: 30px;
      font-weight: 600;
    }
  }
  .home-container {
    min-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 20px;
    .item {
      // width: 65%;
      width: 1200px;
      height: 320px;
      align-items: center;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
  }
  .max-min {
    width: 80%;
    // margin-top: 20px;
    display: flex;
    justify-content: center;
    .s {
      display: flex;
      flex-direction: row;
      width: 900px;
      justify-content: space-between;
    }
    .max-w:nth-child(1) {
      margin-right: 80px;
    }
    .max-w {
      width: 400px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .max-min-item {
        cursor: pointer;
        margin-top: 20px;
        height: 20px;
        width: 200px;
        line-height: 20px;
        text-align: center;
      }
      .max-min-item2 {
        cursor: pointer;
        margin-top: 20px;
        height: 20px;
        width: 100%;
        line-height: 20px;
        text-align: center;
      }
    }
    .max-min-item:nth-child(1) {
      border-right: 1px solid red;
    }
  }
  .deal-wrap {
    display: flex;
    // flex-direction: row;
    margin-top: 20px;
  }
  .deal:not(:last-child) {
    margin-right: 40px;
  }
  .deal {
    margin-top: 30px;
    .s {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .el-card__header {
      padding: 10px;
    }
    .deal-title {
      // margin-bottom: 20px;
      width: 100%;
      text-align: center;
      font-size: 16px;
      // color: #777;
      font-weight: 600;
    }
    .sss {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 80px;
      text-align: center;
      font-size: 14px;
      color: #777;
    }
    .deal-item {
      height: 50px;
      width: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 14px;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      margin-bottom: 8px;
    }
  }
  .red {
    color: #eb5c5e;
  }
  .blue {
    color: #e8a521;
  }
}
</style>
